<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>文章分类</title>
		<link href="plugin/date/date.css" rel="stylesheet">
		<link rel="stylesheet" href="plugin/ztree/css/demo.css" type="text/css">
		<link rel="stylesheet" href="plugin/ztree/css/zTreeStyle.css" type="text/css">
		<link href="bootstrap/css/bootstrap3.min.css" rel="stylesheet">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript" src="plugin/ztree/js/jquery.ztree.core.js"></script>
		<link rel="stylesheet" href="css/nav.css" />
		<style>
			.form-group-update {
				margin-right: 2%;
			}
			li {list-style: none}
			#bannerImg,#classificationImg{display: none;}
			.imgsBox  {display: block;}
			.imgsBox img{ width: 35px; height: 35px;}
			.bannerBox li {border-bottom: 1px solid #f7f7f7; padding: 10px 0;}
		</style>
	</head>

	<body>
		<!--导航-->
	    <nav class="navbar navbar-inverse">
	      <div class="container-fluid">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
	            <span class="sr-only">Toggle navigation</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
		          	<a class="navbar-brand" href=""><img src="images/admin_logo.png" alt=""></a>
	        </div>

	        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
	          <ul class="nav navbar-nav" id="nav">

	          </ul>
	          <ul class="nav navbar-nav navbar-right">
	            <li class="dropdown">
	              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">欢迎您：<span id="uname"></span><span class="caret"></span></a>
	              <ul class="dropdown-menu" role="menu">
	                <li><a href="change_pass.html">修改密码</a></li>
	                <li><a id="loginOut" href="#">退出登陆</a></li>
	              </ul>
	            </li>
	          </ul>
	        </div>
	      </div>
	    </nav>
		<div class="container-fluid">
			<div class="row bcert-box">
				<ol class="breadcrumb">
				  <li><a href="javascript:;">主页</a></li>
				  <li>网站设置</li>
				  <li class="active">文章分类管理</li>
				</ol>
				<div class="btn-group" role="group" aria-label="...">
				  	<button type="button" class="btn btn-primary btn-success ztreeAdd" data-toggle="modal">新增</button>
					<button type="button" class="btn btn-primary btn-default ztreeEditor" data-toggle="modal">编辑</button>
				  	<button type="button" class="btn btn-primary btn-danger ztreeDelete">删除</button>
				</div>
				<ul id="treeDemo" class="ztree"></ul>
			</div>
		</div>
		<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="gridSystemModal"  aria-labelledby="gridSystemModalLabel">
	    <div class="modal-dialog modal-lg" role="document">
	        <div class="modal-content ztreeIpt">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
	                </button>
	                 <h4 class="modal-title" id="gridSystemModalLabel">查看</h4>
	            </div>
	            <div class="modal-body">
					<div class="form-group">
						<label class="col-sm-2 control-label goods-lb-l">分类名</label>
						<div class="col-sm-10 goods-lb-r">
							<input type="text" class="form-control" id="acName" placeholder="分类名">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label goods-lb-l">广告图片</label>
						<div class="col-sm-10 goods-lb-r">
							<ul class="bannerBox">
								<!-- <li class="row">
									<form enctype="multipart/form-data" class="imgForm col-sm-6">
										<input type="file" name="file" onchange="imgup(this,$(this).parent())" placeholder="图片尺寸：640*240" class="input04">
									</form>
									<div class="imgsBox col-sm-2" style="margin:0 auto">
										<img class="img-thumbnail" src="images/111.png" alt="">
										<input type="hidden" name="" value="images/111.png" class="imgName">
									</div>
									<div class="col-sm-2" style="margin:0 auto">
										<input type="text" class="form-control" placeholder="文章编号">
									</div>
									<div class="col-sm-2" style="margin:0 auto">
										<button type="button" class="btn btn-primary btn-danger delBanner">删除</button>
									</div>
								</li> -->
							</ul>
							<p>图片大小：640 * 240</p>
							<button type="button" id="addBanner" class="btn btn-sm btn-primary">新增banner</button>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label goods-lb-l">排序</label>
						<div class="col-sm-10 goods-lb-r">
							<input type="text" class="form-control" id="acSort" placeholder="排序">
						</div>
					</div>
	            </div>
				<!--待审核-->
	            <div class="modal-footer pendingApproval">
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	                <button type="button" class="btn btn-primary" id="ztreeBtn">提交</button>
	            </div>
	        </div>
		        <!-- /.modal-content -->
	    </div>
	    <!-- /.modal-dialog -->
	</div>
	</body>
</html>
<script type="text/javascript" src="plugin/layer/layer.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/bootstrap-filestyle.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script>
	// nultiple initialize
	$('.input04').filestyle({
		htmlIcon : '<span class="oi oi-folder"></span> ',
		text: '预览',
		btnClass : 'btn-primary'
	});

	$(document).ready(function() {
		ztreeDate ()
	});
	//ztree zNodes
	var zNodes;

	//ztree节点id
	var dataId = 0;

	//ztree等级id
	var levelId = '';

	//ztree编辑修改url
	var ztreeDateUrl;

	//ztree
	var setting = {data: {
			simpleData: {
				enable: true
			}
		},callback: {
			onClick: onClick
		}	};

	//ztree树data
	function ztreeDate (){
		ajax(
			serverURL + '/ewArticleClass/queryAllEwArticleClass',
			null,
			ztreeCb,
			'post',
			'json'
		)
	}

	//ztree树data回调
	ztreeCb = function(res){
		console.log(res)
		zNodes = res.data;
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	}

	//点击回调
	function onClick(event, treeId, treeNode,clickFlag) {
		dataId = treeNode.acId;
		levelId = treeNode.acParentId;
		console.log(dataId,levelId)
	};

	//图片上传
	function imgup(upImg,ADD) {
		var datas = new FormData(ADD[0]);
		var size = upImg.files[0].size;//得到图片的大小
		var trueSize = Math.ceil(size/1024);//把字节转换成kb
		if (trueSize > 2048) {
			alert("请上传小于2M的图片")
			return false;
		}
		var fileImg = upImg.files[0].name;            //图片名
		var extStart=fileImg.lastIndexOf(".");
		var ext=fileImg.substring(extStart,fileImg.length).toUpperCase();
		if (ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG") {
			alert("图片类型必须是.gif,jpeg,jpg,png中的一种")
			return false;
		};
		console.log(datas)
		$.ajax({
		 url: serverURL + '/platform/getOssUpload',
		 type: "post",
		 dataType: "json",
		 cache: false,
		 contentType: false,
		 processData: false,
		 data:datas,
		 xhrFields: {
		 	withCredentials: true
	 	},
	 	success: function (data) {
		 	if (data.code == 200) {
				// 	var srcs = getObjectURL(upImg.files[0]);
				// $(upImg).val(data.data)
				var src = data.picName
				$(upImg).parent().next('.imgsBox').html('<img class="img-thumbnail" src="'+ cncbk_common_tools.imgURL+ src +'" alt=""><input type="hidden" name="" value="'+ src +'" class="imgName">')
		 	}
		}
	 });
	 return false
	}

	//添加
	$('.ztreeAdd').click(function(){
		if(levelId!='0'){
			return false;
		}else{
			$('#gridSystemModal').modal()
			ztreeDateUrl = serverURL + '/ewArticleClass/saveEwArticleClass';
		}
	})


	//修改添加
	$('#ztreeBtn').click(function(){
		console.log(dataId,levelId)
		var imgNames = [];
		var articleIds = [];
		$('.imgName').each(function() {
			imgNames.push($(this).val())
		});
		$('.articleId').each(function() {
			articleIds.push($(this).val())
		});
		console.log(articleIds.join(','))
		var data = {
			'acId':dataId,
			'acName':$('#acName').val(),
			'acSort':$('#acSort').val(),
			'run':imgNames.join(','),
			'articleId':articleIds.join(','),
			'isAllowDelete':'1'
		}
		var cbk = function(res){
			layer.msg(res.msg)
			ztreeDate ()
			$('#gridSystemModal').modal('hide')
			//ztree节点id
			dataId = 0
			//ztree等级id
			levelId = ''
		}
		ajax(
			ztreeDateUrl,
			data,
			cbk,
			'post',
			'json'
		)
	})

	//详情
	$('.ztreeEditor').click(function(){
		ztreeDateUrl = serverURL + '/ewArticleClass/updateEwArticleClassById';
		console.log(dataId,levelId)
		var data = {
			'acId':dataId,
		}
		var cbk = function(res){
			$('.bannerBox').empty();
			$('#gridSystemModal').modal();
			$('#acName').val(res.data.acName)
			$('#acSort').val(res.data.acSort)
			var run = res.data.run;
			var articleId = res.data.articleId;
			var imgs = ''
			if (run == '' || run == null) {
				imgs = ''
			}else {
				var imgsh = new Array();
					imgsh=run.split(",")
					var idsh = new Array();
						idsh=articleId.split(",")
				for (var i = 0; i < imgsh.length; i++) {
					imgs += '<li class="row"><form enctype="multipart/form-data" class="imgForm col-sm-6">'+
							'<input type="file" name="file" onchange="imgup(this,$(this).parent())" placeholder="图片尺寸：640*240" class="input04">'+
							'<input type="hidden" name="imgPath" value="articles">'+
							'</form>'+
							'<div class="imgsBox col-sm-2" style="margin:0 auto">'+
								'<img class="img-thumbnail" src="'+ cncbk_common_tools.imgURL+ imgsh[i] +'" alt=""><input type="hidden" name="" value="'+ imgsh[i] +'" class="imgName">'+
							'</div>'+
							'<div class="col-sm-2" style="margin:0 auto">'+
								'<input type="text" class="form-control articleId" data-id="'+ idsh[i] +'" value="'+ idsh[i] +'" placeholder="文章编号">'+
							'</div>'+
							'<div class="col-sm-2" style="margin:0 auto">'+
								'<button type="button" class="btn btn-primary btn-danger delBanner">删除</button>'+
							'</div>'+
							'</li>'
				}
				$('.bannerBox').append(imgs)
				$('.input04').filestyle({
					htmlIcon : '<span class="oi oi-folder"></span> ',
					text: '预览',
					btnClass : 'btn-primary'
				});
			}

		}
		ajax(
			serverURL + '/ewArticleClass/queryByIdEwArticleClass',
			data,
			cbk,
			'post',
			'json'
		)

	})
	//删除节点
	$('.ztreeDelete').click(function(){
		// if (levelId == '0') {
		// 	return false;
		// }else {
			var cbk = function (res){
				layer.msg(res.msg)
				ztreeDate ()
				$('#gridSystemModal').modal('hide')
				//ztree节点id
				dataId = 0
				//ztree等级id
				levelId = ''
			}
			var data = {
				'acIds':dataId
			}
			layer.confirm('确定要删除这条分类吗？', {
	              btn: ['确定','取消'] //按钮
	            }, function(){
					ajax(
						serverURL + '/ewArticleClass/deleteByAcIdEwArticleClass',
						data,
						cbk,
						'post',
						'json'
					)
	            },function(){
	            });
		// }
	})
	//数据清空
	$('#gridSystemModal').on('hidden.bs.modal', function (e) {
		$('.bannerBox').html('');
		$('#acName').val('')
		$('#acSort').val('')
	})

	//添加banner
	$('#addBanner').click(function(){
		var t01 = $('.bannerBox').find("li").length;
		console.log(t01)
		if ($('.bannerBox').find("li").length<5) {
			var html = '<li class="row"><form enctype="multipart/form-data" class="imgForm col-sm-6">'+
					'<input type="file" name="file" onchange="imgup(this,$(this).parent())" placeholder="图片尺寸：640*240" class="input04">'+
					'<input type="hidden" name="imgPath" value="articles">'+
					'</form>'+
					'<div class="imgsBox col-sm-2" style="margin:0 auto"></div>'+
					'<div class="col-sm-2" style="margin:0 auto">'+
						'<input type="text" class="form-control articleId" data-id="" value="" placeholder="文章编号">'+
					'</div>'+
					'<div class="col-sm-2" style="margin:0 auto">'+
						'<button type="button" class="btn btn-primary btn-danger delBanner">删除</button>'+
					'</div>'+
					'</li>'
			$('.bannerBox').append(html)
			$('.input04').filestyle({
				htmlIcon : '<span class="oi oi-folder"></span> ',
				text: '预览',
				btnClass : 'btn-primary'
			});
		}else{
			layer.msg('最多可上传5张banner')
		}
	})

	//删除banner
	$(document).on('click', '.delBanner', function() {
		var _this = $(this)
		layer.confirm('确定要删除吗？', {
			  btn: ['确定','取消'] //按钮
			}, function(){
				_this.parent().parent().remove();
				layer.closeAll('dialog');
			},function(){
			});

	})
</script>
